<template>
    <div class="app-container">
        <div class="left_box">
            <el-form>
                <el-form-item label="选择考试">
                    <el-select v-model="examId" placeholder="请选择考试" @change="chooseExam" style="width: 80%" clearable>
                        <el-option v-for="(item,index) in exam_list" :key="index" :label="item.name" :value="index" :disabled="item.allotStatus==1">{{item.name}}({{item.allotStatus==1 ? '未' : '已'}}排站)</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择时段" v-show="exam_data != null">
                    <el-select v-model="timeId" placeholder="请选择时段" @change="chooseTime" style="width: 80%" clearable>
                        <el-option v-for="(placeMap,timeIdd) in exam_data" :key="timeIdd" :label="time_map[timeIdd].name" :value="timeIdd">{{time_map[timeIdd].name}}</el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="show-class">
            <IN_VIEW ref="waiting_hall_in"/>
        </div>
    </div>
</template>

<script>
import {copyObj, isEmpty, isEmptyStr, parseObj, toJsonStr} from "@/utils/zzDouUtils/objUtil";
import {listScore_ex_exam_today,get_exam_today_data_by_id} from "@/api/score/score_ex_exam";
import IN_VIEW from "./in_view.vue";
import {speak} from "@/utils/zzDouUtils/audioUtil";

export default {
    name: "waiting_hall_view",
    components:{IN_VIEW},
    data() {
        return {
            exam:null,
            timeId: null,
            exam_list: [],
            exam_data: null,
            time_map: {},
            place_map: {},
            examId: null,
            socket: null,
            domain: process.env.VUE_APP_BASE_API,
            notify_duration:1000,
        };
    },
    created() {
        this.initConnect();
    },
    methods: {
        initConnect() {
            this.socket = new WebSocket(`ws://${isEmptyStr(this.domain) ? window.location.host : this.domain}/score-exam-place?role=waiting_hall`)
            // 监听 WebSocket 事件
            this.socket.addEventListener('open', event => {
                this.$notify.success({title: '成功', message: '连接成功',duration: this.notify_duration});
            })
            // 接收到实时数据
            this.socket.addEventListener('message', event => {
                this.listenMessage(event.data)
            })
            this.socket.addEventListener('close', event => {
                this.$notify.error({title: '错误', message: '与后端程序断开连接',duration: this.notify_duration});
            })
            this.socket.addEventListener('error', event => {
                this.$notify.error({title: '错误', message: '与后端程序通讯发生错误',duration: this.notify_duration});
            })
        },
        /** 根据id获取考试今日的详情 */
        getExamTodayDataById() {
            this.sendWebSocketObj({
                order: 'get_exam_today_data_by_id',
                examId: this.exam.id
            });
        },
        /** 选择场地 */
        chooseExam(index) {
            this.exam = this.exam_list[index];
            this.getExamTodayDataById();
            this.$refs.waiting_hall_in.exam = this.exam;
            this.$refs.waiting_hall_in.waiting_data = {};
        },
        /** 选择时段 */
        chooseTime(timeId){
            this.timeId = timeId;
            this.sendWebSocketObj({
                order: 'choose_time',
                examId: this.exam.id,
                timeId: timeId,
            });
        },
        listenMessage(response) {
            let result = parseObj(response);
            if (result.code == '500') {
                this.$notify.error({title: '错误', message: result.msg,duration: this.notify_duration});
            }
            if (result.order == 'today_exam_list'){
                this.exam_list = result.data;
                this.connect_data = result.connectData;
            } else if (result.order == 'get_exam_today_data_by_id'){
                this.exam_data = result.data.data;
                this.time_map = result.data.timeMap;
                this.place_map = result.data.placeMap;
                let count = {};
                Object.keys(result.data.data).forEach(timeId=>{
                    let placeMap = result.data.data[timeId];
                    count[result.data.timeMap[timeId].name] = 0;
                    Object.keys(placeMap).forEach(placeId=>{
                        let placeLists = placeMap[placeId];
                        count[result.data.timeMap[timeId].name] += placeLists.length;
                    })
                })
                this.$refs.waiting_hall_in.place_count = count;
            }else if(result.order == 'choose_time' && result.timeId == this.timeId && result.examId == this.exam.id){
                this.$refs.waiting_hall_in.waiting_data = result.data;
                this.$refs.waiting_hall_in.nameShow = result.nameShow;
            }
        },
        sendWebSocketObj(obj) {
            this.sendWebSocketMsg(toJsonStr(obj));
        },
        sendWebSocketMsg(msg) {
            if (this.socket) this.socket.send(msg);
        },
        closeWebSocket() {
            if (this.socket != null) {
                this.socket.close();
                this.socket = null;
            }
        },
    },
    beforeDestroy() {
        this.closeWebSocket();
    }
};
</script>
<style>
.left_box{
    width: 20%;
    float: left;
}
.show-class {
    width: 79%;
    height: auto;
    float: right;
}
.el-button--doudou {
    width: 100px;
    height: 100px;
    margin-right: 20px;
    font-size: 20px;
    font-weight: bold;
    color: black;
    background-color: rgb(246, 241, 248);
    border-color: rgb(198, 139, 223);
}
</style>
